import { Checkbox, Row, Col } from 'antd';
import React from 'react';

const HdInfoForm = props => {
    const { hdSelect, handleHDSelect, hDs } = props;
    
    return (
        <Checkbox.Group onChange={checkedValue => {handleHDSelect(checkedValue)}} value={hdSelect} style={{ width: '100%'}}>
            <Row>
                {
                    hDs.map((value, index) => {
                        return (
                            <Col key={index} span={24}>
                                <Checkbox value={`${value.DEPART_PORT}-${value.ARRIVAL_PORT}`}>{`${value.DEPART_PORT}-${value.ARRIVAL_PORT}`}</Checkbox>
                            </Col>
                        )
                    })
                }
            </Row>
        </Checkbox.Group>
    )
}

export default HdInfoForm